<script setup lang="ts">
import {useUserPinia} from '~/stores/user'
import {storeToRefs} from "pinia";
import {onMounted, ref, onBeforeMount} from "vue";

import HP5050 from "~/public/shop/HP5050_banner-Lido_03_Ivory_Boucle_1011-992x1120_672x448.webp"
// 用tm代替t，因为tm是响应式的而且可以解析对象
const {locale, setLocale, tm} = useI18n()
const userStore = useUserPinia()
const {token, rating_five} = storeToRefs(userStore);


/**
 * 屏幕尺寸
 */
const screenSize = ref({width: 0, height: 0});


// 更新屏幕尺寸的方法
const updateScreenSize = () => {
  screenSize.value = {
    width: window.innerWidth,
    height: window.innerHeight,
  };
  // console.log("屏幕尺寸", screenSize.value.width)
};



onMounted(() => {
  window.addEventListener('resize', updateScreenSize);
  // 初始化屏幕尺寸
  updateScreenSize();
})

// 组件卸载时移除事件监听器
onUnmounted(() => {
  window.removeEventListener('resize', updateScreenSize);
});

</script>

<template>
  <v-app>
    <v-sheet class="w-9/12 mx-auto">
      <div class="text-4xl font-bold mt-40">客户支持计划</div>
      <div class="text-3xl mt-10 text-[#7c8ca3] text-[24px]">我们的专家将选择最适合您的服务方案，向您提供帮助。</div>

      <v-sheet class="mt-20 d-flex flex-column">
        <ul class="w-full d-flex">
          <li class="w-4/12 py-6"></li>
          <li class="w-4/12 text-center mx-10 bg-cover py-6 bg-[url('https://mdn.alipayobjects.com/huamei_pwpjvv/afts/img/A*urdEQIHuyt0AAAAAAAAAAAAADmesAQ/original')]">基础服务</li>
          <li class="w-4/12 text-center bg-cover py-6 bg-[url('https://mdn.alipayobjects.com/huamei_pwpjvv/afts/img/A*F2b4RYLYeUQAAAAAAAAAAAAADmesAQ/original')]">高级服务</li>
        </ul>
        <ul class="w-full d-flex mt-10">
          <li class="w-4/12 py-8 font-bold text-[20px]">入驻时效</li>
          <li class="w-4/12 text-center mx-10 text-[20px] py-8 border-x-2 border-[#f5f5f5] ">3-5个工作日</li>
          <li class="w-4/12 text-center text-[20px] py-8">1-2个工作日</li>
        </ul>
        <div class="bg-[hsla(0,0%,96%,.5)] h-[8px]"></div>
        <ul class="w-full d-flex">
          <li class="w-4/12 py-8 font-bold text-[20px]">咨询服务时间</li>
          <li class="w-4/12 text-center mx-10 text-[20px] py-8 border-x-2 border-[#f5f5f5] d-flex flex-column ">
              <span>周一至周五</span>
              <span>北京时间：9:00-18:00</span>
          </li>
          <li class="w-4/12 text-center text-[20px] py-8  d-flex flex-column">
            <span>周一至周日</span>
            <span>北京时间：9:00-18:00</span>
          </li>
        </ul>
        <div class="bg-[hsla(0,0%,96%,.5)] h-[8px]"></div>
        <div class="text-[20px] font-bold mt-10 mb-6">联系渠道</div>
        <ul class="w-[98%] d-flex bg-[hsla(0,0%,96%,.5)] self-end">
          <li class="w-4/12 py-4 text-[20px] pl-10">邮箱</li>
          <li class="w-4/12 text-center mx-10 text-[20px] border-x-2 border-[#f5f5f5] py-4 d-flex flex-column align-center">
              <v-img src="https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/icon-checked.d9d3210a.svg" width="28px" height="24px"></v-img>
          </li>
          <li class="w-4/12 text-center text-[20px] py-4 d-flex flex-column align-center">
            <v-img src="https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/icon-checked-d4983f.d573a144.svg" width="28px" height="24px"></v-img>
          </li>
        </ul>
        <ul class="w-[98%] d-flex self-end">
          <li class="w-4/12 py-4 text-[20px] pl-10">工单</li>
          <li class="w-4/12 text-center mx-10 text-[20px] border-x-2 border-[#f5f5f5] py-4 d-flex flex-column align-center">
              <v-img src="https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/icon-checked.d9d3210a.svg" width="28px" height="24px"></v-img>
          </li>
          <li class="w-4/12 text-center text-[20px] py-4 d-flex flex-column align-center">
            <v-img src="https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/icon-checked-d4983f.d573a144.svg" width="28px" height="24px"></v-img>
          </li>
        </ul>
        <ul class="w-[98%] d-flex bg-[hsla(0,0%,96%,.5)] self-end">
          <li class="w-4/12 py-4 text-[20px] pl-10">钉钉群</li>
          <li class="w-4/12 text-center mx-10 text-[20px] border-x-2 border-[#f5f5f5] py-4 d-flex flex-column align-center">
              <v-img src="https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/icon-ignore.29380e77.svg" width="28px" height="24px"></v-img>
          </li>
          <li class="w-4/12 text-center text-[20px] py-4 d-flex flex-column align-center">
            <v-img src="https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/icon-checked-d4983f.d573a144.svg" width="28px" height="24px"></v-img>
          </li>
        </ul>
        <ul class="w-[98%] d-flex self-end mb-20">
          <li class="w-4/12 py-4 text-[20px] pl-10">即时通讯工具</li>
          <li class="w-4/12 text-center mx-10 text-[20px] border-x-2 border-[#f5f5f5] py-4 d-flex flex-column align-center">
              <v-img src="https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/icon-ignore.29380e77.svg" width="28px" height="24px"></v-img>
          </li>
          <li class="w-4/12 text-center text-[20px] py-4 d-flex flex-column align-center">
            <v-img src="https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/icon-checked-d4983f.d573a144.svg" width="28px" height="24px"></v-img>
          </li>
        </ul>
        <div class="bg-[hsla(0,0%,96%,.5)] h-[8px]"></div>
        <ul class="w-full d-flex pl-10">
          <li class="w-4/12 py-8 font-bold text-[20px]  d-flex align-center">专属经理</li>
          <li class="w-4/12 text-center mx-10 text-[20px] border-x-2 border-[#f5f5f5] py-4 d-flex flex-column align-center">
              <v-img src="https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/icon-ignore.29380e77.svg" width="28px" height="24px"></v-img>
          </li>
          <li class="w-4/12 text-center text-[20px] py-8 d-flex justify-center align-center">紧急问题由高级经理对接</li>
        </ul>
        <div class="bg-[hsla(0,0%,96%,.5)] h-[8px]"></div>
        <ul class="w-full d-flex pl-10">
          <li class="w-4/12 py-8 font-bold text-[20px] d-flex align-center">语言支持</li>
          <li class="w-4/12 text-center mx-10 text-[20px] py-8 border-x-2 border-[#f5f5f5] d-flex justify-center align-center">双语支持（中文/英文）</li>
          <li class="w-4/12 text-center text-[20px] py-8  d-flex justify-center align-center">多语言支持（中文/英文/日语/韩语）</li>
        </ul>
        <div class="bg-[hsla(0,0%,96%,.5)] h-[8px]"></div>
        <ul class="w-full d-flex pl-10">
          <li class="w-4/12 py-8 font-bold text-[20px] d-flex align-center">咨询服务</li>
          <li class="w-4/12 text-center mx-10 text-[20px] py-8 border-x-2 border-[#f5f5f5] d-flex justify-center align-center">提供基础咨询服务</li>
          <li class="w-4/12 text-center text-[20px] py-8  d-flex justify-center align-center">提供入驻、签约支持、合约管理、账号管理、交易、资金、账单、拒付等全账户咨询服务</li>
        </ul>
        <div class="bg-[hsla(0,0%,96%,.5)] h-[8px]"></div>
        <ul class="w-full d-flex pl-10">
          <li class="w-4/12 py-8 font-bold text-[20px] d-flex align-center">咨询响应</li>
          <li class="w-4/12 text-center mx-10 text-[20px] py-8 border-x-2 border-[#f5f5f5] d-flex justify-center align-center">{{'<48小时'}}</li>
          <li class="w-4/12 text-center text-[20px] py-8  d-flex justify-center align-center">{{'<24小时'}}</li>
        </ul>
        <div class="bg-[hsla(0,0%,96%,.5)] h-[8px]"></div>
        <ul class="w-full d-flex pl-10">
          <li class="w-4/12 py-8 font-bold text-[20px] d-flex align-center">技术异常响应</li>
          <li class="w-4/12 text-center mx-10 text-[20px] py-8 border-x-2 border-[#f5f5f5] d-flex justify-center align-center">{{'<24小时'}}</li>
          <li class="w-4/12 text-center text-[20px] py-8  d-flex justify-center align-center">{{'<24小时'}}</li>
        </ul>
        <div class="bg-[hsla(0,0%,96%,.5)] h-[8px]"></div>
        <ul class="w-full d-flex pl-10">
          <li class="w-4/12 py-8 font-bold text-[20px] d-flex align-center">运营指导</li>
          <li class="w-4/12 text-center mx-10 text-[20px] py-8 border-x-2 border-[#f5f5f5] d-flex justify-center align-center"></li>
          <li class="w-4/12 text-center text-[20px] py-8  d-flex justify-center align-center"></li>
        </ul>
        <ul class="w-[98%] d-flex bg-[hsla(0,0%,96%,.5)] self-end">
          <li class="w-4/12 py-4 text-[20px] pl-10">商家门户操作指导手册</li>
          <li class="w-4/12 text-center mx-10 text-[20px] border-x-2 border-[#f5f5f5] py-4 d-flex flex-column align-center">
              <v-img src="https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/icon-checked.d9d3210a.svg" width="28px" height="24px"></v-img>
          </li>
          <li class="w-4/12 text-center text-[20px] py-4 d-flex flex-column align-center">
            <v-img src="https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/icon-checked-d4983f.d573a144.svg" width="28px" height="24px"></v-img>
          </li>
        </ul>
        <ul class="w-[98%] d-flex self-end">
          <li class="w-4/12 py-4 text-[20px] pl-10">拒付标准指引白皮书</li>
          <li class="w-4/12 text-center mx-10 text-[20px] border-x-2 border-[#f5f5f5] py-4 d-flex flex-column align-center">
              <v-img src="https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/icon-ignore.29380e77.svg" width="28px" height="24px"></v-img>
          </li>
          <li class="w-4/12 text-center text-[20px] py-4 d-flex flex-column align-center">
            <v-img src="https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/icon-checked-d4983f.d573a144.svg" width="28px" height="24px"></v-img>
          </li>
        </ul>
        <ul class="w-[98%] d-flex bg-[hsla(0,0%,96%,.5)] self-end">
          <li class="w-4/12 py-4 text-[20px] pl-10">拒付1对1培训</li>
          <li class="w-4/12 text-center mx-10 text-[20px] border-x-2 border-[#f5f5f5] py-4 d-flex flex-column align-center">
              <v-img src="https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/icon-ignore.29380e77.svg" width="28px" height="24px"></v-img>
          </li>
          <li class="w-4/12 text-center text-[20px] py-4 d-flex flex-column align-center">
            <v-img src="https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/icon-checked-d4983f.d573a144.svg" width="28px" height="24px"></v-img>
          </li>
        </ul>
        <ul class="w-[98%] d-flex self-end mb-20">
          <li class="w-4/12 py-4 text-[20px] pl-10 d-flex flex-column">
            <span>入驻白皮书</span>
            <span>提前沟通帮助理解入驻要求</span>
          </li>
          <li class="w-4/12 text-center mx-10 text-[20px] border-x-2 border-[#f5f5f5] py-4 d-flex flex-column align-center">
              <v-img src="https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/icon-ignore.29380e77.svg" width="28px" height="24px"></v-img>
          </li>
          <li class="w-4/12 text-center text-[20px] py-4 d-flex flex-column align-center">
            <v-img src="https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/icon-checked-d4983f.d573a144.svg" width="28px" height="24px"></v-img>
          </li>
        </ul>
        <div class="bg-[hsla(0,0%,96%,.5)] h-[8px]"></div>
        <ul class="w-full d-flex pl-10">
          <li class="w-4/12 py-8 font-bold text-[20px] d-flex align-center">数据分析</li>
          <li class="w-4/12 text-center mx-10 text-[20px] py-8 d-flex justify-center align-center"></li>
          <li class="w-4/12 text-center text-[20px] py-8  d-flex justify-center align-center"></li>
        </ul>
        <ul class="w-[98%] d-flex bg-[hsla(0,0%,96%,.5)] self-end">
          <li class="w-4/12 py-4 text-[20px] pl-10">技术系统化报表服务</li>
          <li class="w-4/12 text-center mx-10 text-[20px] border-x-2 border-[#f5f5f5] py-4 d-flex flex-column align-center">
              <v-img src="https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/icon-ignore.29380e77.svg" width="28px" height="24px"></v-img>
          </li>
          <li class="w-4/12 text-center text-[20px] py-4 d-flex flex-column align-center">
            <v-img src="https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/icon-checked-d4983f.d573a144.svg" width="28px" height="24px"></v-img>
          </li>
        </ul>
        <div class="bg-[hsla(0,0%,96%,.5)] h-[8px]"></div>
        <ul class="w-full d-flex pl-10">
          <li class="w-4/12 py-8 font-bold text-[20px] d-flex align-center">监控支持</li>
          <li class="w-4/12 text-center mx-10 text-[20px] py-8 d-flex justify-center align-center"></li>
          <li class="w-4/12 text-center text-[20px] py-8  d-flex justify-center align-center"></li>
        </ul>
        <ul class="w-[98%] d-flex bg-[hsla(0,0%,96%,.5)] self-end">
          <li class="w-4/12 py-4 text-[20px] pl-10">活动日常技术监控</li>
          <li class="w-4/12 text-center mx-10 text-[20px] border-x-2 border-[#f5f5f5] py-4 d-flex flex-column align-center">
              <v-img src="https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/icon-ignore.29380e77.svg" width="28px" height="24px"></v-img>
          </li>
          <li class="w-4/12 text-center text-[20px] py-4 d-flex flex-column align-center">
            <v-img src="https://cdn.marmot-cloud.com/page/antom_official_website/_next/static/media/icon-checked-d4983f.d573a144.svg" width="28px" height="24px"></v-img>
          </li>
        </ul>
      </v-sheet>
    </v-sheet>

    <footer-other></footer-other>

  </v-app>

</template>

<style scoped>

</style>